<template>
 <div class="app" :class="fixed == true ? 'fixed' : ''">
 <div class="contain">
 <img src="@/assets/image/logo.png" alt="">
 <ul>
 <li><router-link to="/">首页</router-link></li>
<!-- <li> {{$store.state.home.categoryList}}</li> -->
 <li 
 
  @mouseenter="enter(index)"

  @mouseleave="leave(index)" v-for="(item,index) in cage " :key="item.id">
 <router-link 

 :to="`/cagegory/${item.id}`" :class="{mouseColor: currentIndex === index,active:item.id === $route.params.id } ">{{item.name}}</router-link>
 </li>
 
 <li class="search" >
<span class="iconfont icon-sousuo"></span>
 <input type="text" placeholder="请输入搜索内容">
 </li>
 <!-- 购物车 -->
 <li class="car" @mousemove="Mousecar">
 <router-link to="/car">
 <!-- <i class="iconfont icon-gouwuchekong"></i> --> 
 <van-icon name="cart-o" :badge="$store.getters['cart/validTotal']" size='30' />
 <!-- <van-icon name="chat-o" color="#1989fa" /> -->
</router-link> 
<!-- 购物车弹出层 -->
    <div class="layer" 
    v-if="$store.getters['cart/validTotal']>0&&$route.path!=='/cart'"
   
    >
      <div class="list">
        <div class="item" v-for="goods in $store.getters['cart/validList']" :key="goods.skuId">
          <RouterLink :to="`/product/${goods.id}`">
            <img :src="goods.picture" alt="" />
            <div class="center">
              <p class="name ellipsis-2">{{goods.name}}</p>
              <p class="attr ellipsis">{{goods.attrsText}}</p>
            </div>
            <div class="right">
              <p class="price">&yen;{{goods.nowPrice}}</p>
              <p class="count">x{{goods.count}}</p>
            </div>
          </RouterLink>
          <i @click="deleteCart(goods.skuId)" class="iconfont icon-close-new"></i>
        </div>
      </div>
      <div class="foot">
        <div class="total">
          <p>共 {{$store.getters['cart/validTotal']}} 件商品</p>
          <p>&yen;{{$store.getters['cart/validAmount']}}</p>
        </div>
        <XtxButton @click="$router.push('/cart')" type="plain">去购物车结算</XtxButton>
      </div>
    </div>
 </li>
 </ul>
 
</div>
<div 
 
  
>
<div v-show="currentIndex===index"
    :class="{hidden: currentIndex === index}"
    @mouseover="mouseover(index)" @mouseleave="leave(index)"
    v-for="(item,index) in cage "  :key="item.id">
     <li v-for="subitem in item.children " :key="subitem.id">
     <router-link :to="`/cagegory/sub/${subitem.id}`">
     <img :src="subitem.picture" alt="" class="Img">
     <span>{{subitem.name}}</span>
     
    
     </router-link>
     </li>
    
    </div>
  
 </div>

 
 </div>
</template>

<script setup>

import { useStore, } from 'vuex'
import {ref,computed,reactive,refs} from 'vue'
 const store = useStore()
 const  currentIndex = ref(-1)

 const cage = computed(()=>{
    return store.state.home.categoryList
 })
 const enter = ((index) =>{
    console.log('enter')
    currentIndex.value = index
    console.log(' currentIndex',currentIndex.value)

    
 })
 const leave = ((index)=>{
 console.log('enter')
     currentIndex.value = -1
    
 })
 

const mouseover = ((index) =>{
    console.log('enter')
    
    currentIndex.value = index
 })
  const fixed = ref(false)
 const  fixedActiveBtn = (() =>{
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
        // console.log(scrollTop)
        scrollTop >= 60 ? (fixed.value = true) : (fixed.value = false)
        // store.commit(updataFixed,scrollTop)
    })
    const Carshow = ref(false)
  const mouseCar = () =>{
    console.log('cacacacacaaaaaaaaaaaaaaa')
    Carshow.value = true
    // dialogVisible.value = true
  }
const dialogVisible = ref(false)
window.addEventListener('scroll',fixedActiveBtn)
console.log('cage',cage)
const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
//  $refs.show()
</script>

<style lang='less' scoped>

.app{
    width: 100%;
    height: 132px;
    background-color: #fff;
}
.contain{
    display: flex;
    align-items: center;
    height: 132px;
    img{
        width: 200px;
    }
}

ul{
    display: flex;
}
li{
    a{
        text-decoration: none;
         color: #333333;
          font-size: 16px;
        
    }
   
   
   
    list-style: none;
    padding: 20px;
}
.mouseColor{ color: #1dc779;  text-decoration:underline; cursor: pointer;}
 
    .search input {
        border: none;
        border-bottom: 1px solid #333333;
        outline: none;
    }
    .car{
    width: 50px;
    position: relative;
    z-index: 600;
    a{
    text-align: center;
    display: block;
    }
    }
    .icon-gouwuchekong {
    font-size: 22px;
}
.icon-sousuo{
    font-size: 20px;
}
.hidden{
    display: flex;
    margin: 0 auto;
    position:relative;
    margin-top: -50px;
    transform: translate(100px 0 0 0);
    width: 1240px;
    height: 165px;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    z-index: 666;
    display: block;
   
    div{
        width: 100%;
        height: 100%;
    }
    span{
      
        padding: 10px;
    }
    .Img{
        width: 80px;
        height: 80px;
        text-align: center;
    }
     a {
			/*将a转换为块级元素，才能设置宽高*/
			display: block;
			width: 78px;
			height: 85px;
			color: #333;
			font-size: 12px;
			/*使用flex布局，小米秒杀会浮起来*/
			display: flex;
			/*设置主轴方向为垂直方向，目的是让图片和文字从上到下排列*/
			flex-direction: column;
			/*设置主轴上子元素水平居中,此时主轴是垂直方向*/
			justify-content: center;
			/*设置侧轴上子元素居中,此时侧轴是水平方向*/
			align-items: center;
		}


    li{
        text-align: center;    
      display:inline-flex;
      align-items: center;
      text-overflow: ellipsis;
      overflow: hidden;
       white-space: nowrap;
       
         span:hover{
        color: #1dc779;  text-decoration:underline; cursor: pointer;
         }
    }
   
}
.fixed {
  position: fixed;
  z-index: 21;
  height: 100px;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid #dadada;
}
.active{
    color: #1dc779;
    text-decoration:underline ;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
 
     .car:hover {
    .layer {
      opacity: 1;
      transform: none
    }
  }
 
  .layer {
    opacity: 0;
    transition: all .4s .2s;
    transform: translateY(-200px) scale(1, 0);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 100px;
    right: 10px;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: #fff;
    border-radius: 4px;
    padding-top: 10px;
    &::before {
      content: "";
      position: absolute;
      right: 14px;
      top: -10px;
      width: 20px;
      height: 20px;
      background: #fff;
      transform: scale(0.6,1) rotate(45deg);
      box-shadow: -3px -3px 5px rgba(0,0,0,0.1);
    }
    .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70px;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      align-items: center;
      .total {
        padding-left: 10px;
        color: #999;
        p {
          &:last-child {
            font-size: 18px;
            color: red;
          }
        }
      }
    }
  }
  .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70px;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      align-items: center;
      .total {
        padding-left: 10px;
        color: #999;
        p {
          &:last-child {
            font-size: 18px;
            color: red;
        }
      }
    }
  }
  .list {
    height: 310px;
    overflow: auto;
    padding: 0 10px;
    &::-webkit-scrollbar{
      width:10px;
      height:10px;
    }
    &::-webkit-scrollbar-track{
      background: #f8f8f8;
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb{
      background: #eee;
      border-radius:10px;
    }
    &::-webkit-scrollbar-thumb:hover{
      background: #ccc;
    }
    .item {
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;
      position: relative;
      i {
          position: absolute;
          bottom: 38px;
          right: 0;
          opacity: 0;
          color: #666;
          transition: all .5s;
      }
      &:hover {
        i {
          opacity: 1;
          cursor: pointer;
        }
      }
      a {
        display: flex;
        align-items: center;
        img {
          height: 80px;
          width: 80px;
        }
        .center {
          padding: 0 10px;
          width: 200px;
          .name {
            font-size: 16px;
          }
          .attr {
            color: #999;
            padding-top: 5px;
          }
        }
        .right {
          width: 100px;
          padding-right: 20px;
          text-align: center;
          .price {
            font-size: 16px;
            color: red;
          }
          .count {
            color: #999;
            margin-top: 5px;
            font-size: 16px;
          }
        }
      }
    }
  }

</style>